<template>
	<div v-if="rows" @click="drawerTag = true">
		<el-button v-if="rows.length < 1" size="small">参数配置</el-button>
		<div v-else>
			<template v-for="row in rows" :key="row.name">
				<el-tag :color="ToolRandom.randomColor()">{{row.name}}</el-tag>
			</template>
		</div>
	</div>
	<el-drawer v-model="drawerTag" title="请选择" :append-to-body="true">
		<template v-for="(row, _index) in rows" :key="_index">
			<el-row :gutter="10" style="margin-bottom: 20px;">
				<el-col :span="5">
					<el-input size="small" v-model="row.name" placeholder="请输入参数"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input size="small" v-model="row.code" placeholder="请输入code"></el-input>
				</el-col>
				<el-col :span="5">
					<n-com-select size="small" :dictList="dataTypes" v-model="row.data_type"></n-com-select>
				</el-col>
				<el-col :span="9">
					<el-button size="small" @click="update(row)" type="primary">
						保存
					</el-button>
					<el-button size="small" @click="remove(row.id)" type="danger">
						删除
					</el-button>
				</el-col>
			</el-row>
		</template>
		<el-row :gutter="10">
			<el-col :span="6">
				<el-input size="small" v-model="newRow.name" placeholder="请输入参数"></el-input>
			</el-col>
			<el-col :span="6">
				<el-input size="small" v-model="newRow.code" placeholder="请输入code"></el-input>
			</el-col>
			<el-col :span="6">
				<n-com-select size="small" :dictList="dataTypes" v-model="newRow.data_type"></n-com-select>
			</el-col>
			<el-col :span="6">
				<el-button size="small" style="margin-right: 10px;" @click="handleAdd" type="primary">
					保存
				</el-button>
			</el-col>
		</el-row>
	</el-drawer>
</template>
<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	import use from "../useComponent";
	import ToolRandom from "@/tool/ToolRandom.js";
	import ToolActionApi from "@/tool/http/tool-action.js";


	const props = defineProps({
		defaultIds: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['update:defaultIds', 'ntdChange']);

	const dataTypes = ref([]);
	const drawerTag = ref(false);
	const newRow = ref({});

	const {
		rows,
		remove,
		sync
	} = use({
		queryParam: {
			rules: {
				'id__in': (props.defaultIds || []).join(',')
			}
		}
	}, 'common_param', (rowsWatch) => {
		emit('update:defaultIds', rowsWatch.map(row => row.id));
		emit('ntdChange', rowsWatch.map(row => row.id));
	});


	ToolActionApi.enumDict("data_type").then(res => {
		dataTypes.value = res;
	})


	const handleAdd = async () => {
		await sync(newRow.value);
		newRow.value = {};
	}
</script>
